<template>
	<view style="background-color: #F9F9F9;">
		<!-- 提示横幅 -->
		<view
			style="background-color: #F8F1E7; padding: 15px; border-bottom: 1px solid #E0E0E0; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
			<u-icon name="volume" color="#F7A62A" size="20"></u-icon>
			<text style="color: #F7A62A; font-size: 15px; font-weight: 500;">右划删除浏览记录</text>
		</view>

		<!-- 商品列表 -->
		<view style="background-color: #FCFCFC;padding: 10px;margin-bottom: 15px;" @click="toProductDetail()">
			<view style="font-weight: bold;font-size: 20px;">
				杂货铺
			</view>
			<u-divider></u-divider>
			<view style="display: flex;align-items: center;gap: 10px;">
				<u-image src="/static/img/R-C.jpg" width="100px" height="100px"></u-image>
				<view style="display: flex;flex-direction: column;justify-content: center;align-items: flex-start;">
					<view style="font-size: 16px; color: #333; margin-bottom: 5px;">
						商品名称
					</view>
					<view style="font-weight: bold;font-size: 16px; color: #FF6B35;">
						￥110.00
					</view>
				</view>
			</view>
		</view>



		<view style="background-color: #FCFCFC;padding: 10px;margin-bottom: 15px;" @click="toProductDetail()">
			<view style="font-weight: bold;font-size: 20px;">
				杂货铺
			</view>
			<u-divider></u-divider>
			<view style="display: flex;align-items: center;gap: 10px;">
				<u-image src="/static/img/R-C.jpg" width="100px" height="100px"></u-image>
				<view style="display: flex;flex-direction: column;justify-content: center;align-items: flex-start;">
					<view style="font-size: 16px; color: #333; margin-bottom: 5px;">
						商品名称
					</view>
					<view style="font-weight: bold;font-size: 16px; color: #FF6B35;">
						￥110.00
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			swipeOptions: [{
				text: '删除',
				style: {
					backgroundColor: '#FF6B35',
					color: '#FFFFFF'
				}
			}]
		}
	},
	methods: {
		handleSwipeClick(e, index) {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除这条浏览记录吗？',
				success: (res) => {
					if (res.confirm) {
						this.productList.splice(index, 1);
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						});
					}
				}
			});
		},
		toProductDetail() {
			console.log('点击事件触发');
			// 先显示提示确认点击正常
			uni.showToast({
				title: '点击成功',
				icon: 'success',
				duration: 1000
			});
			
			// 延迟跳转
			setTimeout(() => {
				console.log('开始跳转');
				uni.navigateTo({
					//跳转到店铺
					url: '/pages/login/yinsixieyi',
					success: (res) => {
						console.log('跳转成功', res);
					},
					fail: (err) => {
						console.log('跳转失败', err);
						uni.showToast({
							title: '跳转失败: ' + err.errMsg,
							icon: 'none'
						});
					}
				});
			}, 1500);
		}
	}
}
</script>

<style></style>
